<template>
  <GridView ref="gridRef" v-if="gridJson" :gridJson="gridJson">
    <!-- 查询列表扩展 -->
    <template #query> </template>
    <!-- 字段列表扩展 -->
    <template #column="scope"></template>
    <!-- 数据处理扩展,存在时替换默认处理逻辑,插入对应字段名称的插槽即可替换默认内容渲染 -->
    <template #字段名称="{ scope, field }"></template>
    <!-- 操作列表扩展 -->
    <template #operate="{ scope }"></template>
    <!-- 编辑页面扩展任意属性 -->
    <template #EDIT_ADD_FIELD="{ modal }"></template>
    <!-- 添加页面扩展任意属性 -->
    <template #ADD_ADD_FIELD="{ modal }"> </template>
  </GridView>
  <el-empty description="网格数据加载中" v-else />
</template>
<script setup>
import GridView from '../grid/json/preview/GridView.vue'
// 单页面网格模版
import { inject, ref, onBeforeMount, onActivated, onDeactivated, onUnmounted } from 'vue'
const api = inject('api')
const props = defineProps(['gridId'])
const gridJson = ref(null)
const gridRef = ref()
onBeforeMount(() => {
  api
      .getApi('FaSysGrid', props.gridId)
      .getCurrentJson()
      .then((data) => {
        gridJson.value = data
      })
  console.log('base.onBeforeMount')
})

// 缓存生命周期钩子
onActivated(() => {
  console.log('base.组件激活，可在此刷新数据')
})

onDeactivated(() => {
  console.log('base.组件停用，保留状态')
})

onUnmounted(() => {
  console.log('base.组件卸载销毁，可清理数据')
})
</script>
<style scoped></style>
